<script setup>
const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
  group: {
    type: Array,
    default: () => [],
  },
});

const emits = defineEmits(["update:modelValue", "change"]),
  winnerPopupList = inject("winnerPopupList"),
  receivePopupList = inject("receivePopupList"),
  thanksPopupList = inject("thanksPopupList"),
  addComponent = inject("addComponent");

const validateWinner = (rule, value, callback) => {
  let popup = winnerPopupList.value
    .concat(_winnerPopupList.value)
    .find((item) => item.uid === props.modelValue.winnerPopupUid);
  if (!popup) {
    callback(new Error("所选弹窗不存在"));
  }
  callback();
};

const validateReceive = (rule, value, callback) => {
  if (!value || value.length == 0) callback();
  let popup = receivePopupList.value
    .concat(_receivePopupList.value)
    .find((item) => props.modelValue.receivePopupUid.indexOf(item.uid) >= 0);
  if (!popup) {
    callback(new Error("所选弹窗不存在"));
  }
  callback();
};

const validateThanks = (rule, value, callback) => {
  let popup = thanksPopupList.value
    .concat(_thanksPopupList.value)
    .find((item) => item.uid === props.modelValue.thanksPopupUid);
  if (!popup) {
    callback(new Error("所选弹窗不存在"));
  }
  callback();
};

const _winnerPopupList = computed(() => {
  return props.group.filter(
    (item) => item.type === "Popup" && item.pageConfig.type === "winnerPrize"
  );
});

const _receivePopupList = computed(() => {
  return props.group.filter(
    (item) =>
      item.type === "CustomPopup" &&
      item.children.find((child) => child.type === "PrizeReceive")
  );
});

const _thanksPopupList = computed(() => {
  return props.group.filter(
    (item) => item.type === "Popup" && item.pageConfig.type === "thanksPrize"
  );
});

const initConfig = () => {
  // 绑定中奖弹窗、未中奖弹窗
  if (!props.modelValue.winnerPopupUid) {
    if (winnerPopupList.value.length > 0)
      props.modelValue.winnerPopupUid = winnerPopupList.value[0].uid;
    else {
      props.modelValue.winnerPopupUid = addComponent(
        { name: "中奖弹窗", type: "Popup" },
        {
          pageConfig: {
            type: "winnerPrize",
          },
        },
        false
      );
    }
  }
  if (!props.modelValue.thanksPopupUid) {
    if (thanksPopupList.value.length > 0)
      props.modelValue.thanksPopupUid = thanksPopupList.value[0].uid;
    else {
      props.modelValue.thanksPopupUid = addComponent(
        { name: "未中奖弹窗", type: "Popup" },
        {
          pageConfig: {
            type: "thanksPrize",
          },
        },
        false
      );
    }
  }

  onChange();
};

const onChange = (val) => {
  emits("update:modelValue", val);
  emits("change", val);
};

onMounted(() => {
  nextTick(() => {
    initConfig();
  });
});
</script>
<template>
  <el-form-item
    label="默认中奖弹窗:"
    prop="winnerPopupUid"
    :rules="[
      { required: true, message: '请选择默认中奖弹窗', trigger: 'change' },
      { validator: validateWinner, trigger: 'change' },
    ]"
  >
    <el-select
      v-model="modelValue.winnerPopupUid"
      placeholder="请选择"
      style="width: 200px"
      clearable
      @change="onChange"
    >
      <el-option-group label="内部弹窗">
        <el-option
          v-for="(item, key) in _winnerPopupList"
          :label="item.name"
          :value="item.uid"
        />
      </el-option-group>
      <el-option-group label="外部弹窗">
        <el-option
          v-for="(item, key) in winnerPopupList"
          :label="item.name"
          :value="item.uid"
        />
      </el-option-group>
    </el-select>
  </el-form-item>
  <el-form-item
    label="立即领奖弹窗:"
    prop="receivePopupUid"
    :rules="[{ validator: validateReceive, trigger: 'change' }]"
  >
    <el-select
      v-model="modelValue.receivePopupUid"
      multiple
      placeholder="请选择"
      style="width: 200px"
      clearable
      @change="onChange"
    >
      <el-option-group label="内部弹窗">
        <el-option
          v-for="(item, key) in _receivePopupList"
          :label="item.name"
          :value="item.uid"
        />
      </el-option-group>
      <el-option-group label="外部弹窗">
        <el-option
          v-for="(item, key) in receivePopupList"
          :label="item.name"
          :value="item.uid"
        />
      </el-option-group>
    </el-select>
  </el-form-item>
  <el-form-item
    label="未中奖弹窗:"
    prop="thanksPopupUid"
    :rules="[
      { required: true, message: '请选择未中奖弹窗', trigger: 'change' },
      { validator: validateThanks, trigger: 'change' },
    ]"
  >
    <el-select
      v-model="modelValue.thanksPopupUid"
      placeholder="请选择"
      style="width: 200px"
      clearable
      @change="onChange"
    >
      <el-option-group label="内部弹窗">
        <el-option
          v-for="(item, key) in _thanksPopupList"
          :label="item.name"
          :value="item.uid"
        />
      </el-option-group>
      <el-option-group label="外部弹窗">
        <el-option
          v-for="(item, key) in thanksPopupList"
          :label="item.name"
          :value="item.uid"
        />
      </el-option-group>
    </el-select>
  </el-form-item>
</template>
